<template>
  <div class="index">
      <div class="container">
        <div class="swiper-box">
          <div class="nav-menu">
            <ul class="menu-wrap">
              <li class="menu-item">
                <a href="javascript:;">手机 电话卡</a>
                <div class="children">
                  <ul v-for="(item,index) of menuList" :key="index">
                    <li v-for="(sub,index) of item" :key="index">
                      <a :href="sub?'/#/product/'+sub.id:''">
                        <img v-lazy="sub?sub.img:'/img/item-box-1.png'">
                        {{sub?sub.name:'小米9'}}
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">电视 盒子</a>
                <div class="children"></div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">笔记本 平板</a>
                <div class="children"></div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">家电 插线板</a>
                <div class="children"></div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">出行 穿戴</a>
                <div class="children"></div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">电源 配件</a>
                <div class="children"></div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">家电 插线板</a>
                <div class="children"></div>
              </li>
              <li class="menu-item">
                <a href="javascript:;">生活 箱包</a>
                <div class="children"></div>
              </li>
            </ul>
          </div>
           <swiper :options="swiperOption" ref="mySwiper">
              <!-- slides -->
              <swiper-slide v-for="(item,index) of slideList" :key="index">
                <a :href="'/#/product/'+item.id">
                  <img v-lazy="item.img">
                </a>
              </swiper-slide>
              <!-- Optional controls -->
              <div class="swiper-pagination"  slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
        <div class="ads-box">
          <a :href="'/#/product/'+item.id" v-for="(item,index) of adsList" :key="index">
            <img v-lazy="item.img">
          </a>
        </div>
        <div class="banner">
          <a href="/#/product/30">
            <img v-lazy="'/img/banner-1.png'" alt="">
          </a>
        </div>

      </div>
      <div class="product-box">
          <div class="container">
            <h2>手机</h2>
            <div class="wrapper">
              <div class="banner-left">
                <a href="/#/product/35">
                  <img v-lazy="'/img/mix-alpha.jpg'" alt="">
                </a>
              </div>
              <div class="list-box">
                <div class="list" v-for="(arr,index) of phoneList" :key="index">
                  <div class="item" v-for="(item,index) of arr" :key="index">
                    <span :class="{'new-pro':index%2==0}">新品</span>
                    <div class="item-img">
                      <img v-lazy="item.mainImage" alt="">
                    </div>
                    <div class="item-info">
                      <h3>{{item.name}}</h3>
                      <p>{{item.subtitle}}</p>
                      <p class="price" @click="addCart(item.id)">{{item.price}}元</p>
                    </div>
                  </div>
                </div>
                <div class="list"></div>
              </div>
            </div>
          </div>
        </div>
      <service-bar></service-bar>
      <modal
        title="提示" 
        sureText="查看购物车" 
        btnType="1" 
        modalType="middle" 
        :showModal="showModal"
        @submit="goToCart"
        @cancel="showModal=false"
      >
      <template v-slot:body>
        <p>商品添加成功！</p>
      </template>
      </modal>
  </div>
</template>

<script>
import ServiceBar from '@/components/ServiceBar'
import Modal from '@/components/Modal'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
    name:'index',
    components:{
      swiper,
      Modal,
      swiperSlide,
      ServiceBar
    },
    data(){
      return{
        swiperOption:{
          autoplay:true,
          loop:true,
          effect:'cube',
          cubeEffect: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
          },
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        slideList:[
          {
            id:'42',
            img:'/img/slider/slide-1.jpg'
          },
          {
            id:'45',
            img:'/img/slider/slide-2.jpg'
          },
          {
            id:'46',
            img:'/img/slider/slide-3.jpg'
          },
          {
            id:'',
            img:'/img/slider/slide-4.jpg'
          },
          {
            id:'',
            img:'/img/slider/slide-5.jpg'
          },
        ],
        menuList:[
          [
            {
              id:'30',
              img:'/img/item-box-1.png',
              name:'小米CC9',
            },{
              id:'31',
              img:'/img/item-box-2.png',
              name:'小米8青春版',
            },{
              id:'32',
              img:'/img/item-box-3.jpg',
              name:'Redmi K20 Pro',
            },{
              id:'33',
              img:'/img/item-box-4.jpg',
              name:'移动4g专区',
            },
          ],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]
        ],
        adsList:[
          {
            id:33,
            img:'/img/ads/ads-1.png',
          },
          {
            id:48,
            img:'/img/ads/ads-2.jpg',
          },
          {
            id:45,
            img:'/img/ads/ads-3.png',
          },
          {
            id:47,
            img:'/img/ads/ads-4.jpg',
          },
        ],
        phoneList:[],
        showModal:false
      }
    },
    methods:{
      init(){
        this.axios.get('/products',{
          params:{
            categoryId:100012,
            pageSize:14
          }
        }).then((res)=>{
          res.list=res.list.slice(6,14);
          this.phoneList=[res.list.slice(0,4),res.list.slice(4,8)];
        })
      },
      addCart(id){
        this.axios.post('./carts',{
          productId:id,
          selected: true
        }).then((res)=>{
          this.showModal=true;
          this.$store.dispatch('saveCartCount',res.cartTotalQuantity);
          // this.$store.dispatch('saveCartCount',res.cartProductVoList.length)
        }).catch(()=>{
          this.showModal=true;
        })
      },
      goToCart(){
        this.$router.push('/cart')
      }
    },
    mounted(){
      this.init();
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
@import '@/assets/scss/mixin.scss';
@import '@/assets/scss/config.scss';
.index{
  .swiper-box{
    .nav-menu{
      position: absolute;
      width:264px;
      height:451px;
      z-index:9;
      padding:26px 0;
      background-color:#55585a7a;
      box-sizing: border-box;
      .menu-wrap{
        .menu-item{
          height:50px;
          line-height:50px;
          a{
            position:relative;
            display:block;
            font-size: 16px;
            color:#fff;
            padding-left:30px;
            &:after{
              position:absolute;
              right:30px;
              top:17.5px;
              content:' ';
              @include bgImg(10px,15px,'/img/icon-arrow.png');
            }
          }
          &:hover{
            background: $colorA;
            .children{
                display:block;
            }
          }
          .children{
            display:none;
            width:962px;
            height:451px;
            background: $colorG;
            position: absolute;
            top:0;
            left:264px;
            border:1px solid $colorH;
            ul{
              display:flex;
              justify-content: space-between;
              height:75px;
              li{
                height: 75px;
                line-height: 75px;
                flex:1;
                padding-left:23px;
              }
              a{
                color:$colorB;
                font-size: 14px;
              }
              img{
                width:42px;
                height:35px;
                vertical-align: middle;
                margin-right:15px;
              }
            }
          }
        }
      }
    }
    .swiper-container{
      height: 451px;
      .swiper-button-prev{
        left:274px;
      }
      img{
        width:100%;
        height:100%;
      }
    }
  }
  .ads-box{
    @include flex();
    margin-top: 14px;
    margin-bottom:31px;
    a{
      width:296px;
      height:167px;
    }
  }
  .banner{
    margin-bottom:50px;
  }
  .product-box{
    // background: $colorJ;
    padding:30px 0 50px;
    h2{
      font-size: 22px;
      height:21px;
      line-height:21px;
      color:$colorB;
      margin-bottom: 20px;;
    }
    .wrapper{
      display:flex;
      .banner-left{
        margin-right:16px;
        img{
          width:224px;
          height:619px;
        }
      }
      .list-box{
        .list{
          @include flex();
          width:986px;
          margin-bottom:14px;
          &:last-child{
            margin-bottom:0;
          }
          .item{
            width:236px;
            height:302px;
            background:$colorG;
            text-align:center;
            span{
              display: inline-block;
              width:67px;
              height:24px;
              line-height: 24px;
              font-size:14px;
              color:#fff;
              &.new-pro{
                background:#7ecf68;
              }
              &.kill-pro{
                background:#e82626;
              }
            }
            .item-img{
              img{
                height:195px;
                width: 100%;
              }
            }
            .item-info{
              h3{
                font-size: 14px;
                color: $colorB;
                line-height: 14px;
                font-weight:bold;
              }
              p{
                color:$colorD;
                line-height:13px;
                margin: 6px auto 13px;
              }
              .price{
                color:#f20a0a;
                font-size: 14px;
                font-weight:bold;
                cursor: pointer;
                &:after{
                  content:'';
                  @include bgImg(22px,22px,'/img/icon-cart-hover.png');
                  margin-left: 5px;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>